import React, { PropTypes } from 'react';
import { Carousel, WhiteSpace } from 'antd-mobile';
import './less/index.less';

const propTypes = {
    data: PropTypes.array.isRequired,
};

class MyCarousel extends React.Component {
    state = {
        data: ['', '', ''],
        initialHeight: 100,
    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: this.props.data,
            });
        }, 100);
    }
    render() {
        const hProp = this.state.initialHeight ? { height: this.state.initialHeight } : {};
        return (
            <div>
                <Carousel
                    className="my-carousel"
                    autoplay={true}
                    infinite
                    selectedIndex={0}
                    swipeSpeed={35}
                    // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    // afterChange={index => console.log('slide to', index)}
                >
                    {this.state.data.map(ii => (
                        <a href="#" key={ii} style={hProp}>
                            <img
                                src={`${ii}`}
                                alt=""
                                onLoad={() => {
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({
                                        initialHeight: null,
                                    });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
                <WhiteSpace />
            </div>
        );
    }
}

MyCarousel.propTypes = propTypes;

export default MyCarousel;